<template>
  <div>
    <el-card>
      <el-row class="bigbox">
        <!-- <h1>设备管理</h1> -->
        <el-form ref="qwerdadad" :inline="true" :model="params" class="demo-form-inline">
          <div class="inbox">
            <el-form-item label="设备编号:" prop="startDate">
              <el-input v-model="params.orderNo" clearable class="input" placeholder="请输入"></el-input>
            </el-form-item>
            <!--  -->
            <el-form-item prop="endDate">
              <div class="blocker">
                <span class="demonstration">选择日期：</span>
                <el-date-picker
                  v-model="params.value1"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
            </el-form-item>
            <!--  -->
            <el-form-item>
              <el-button class="btn" icon="el-icon-search" type="primary" @click="submit">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-row>
    </el-card>
    <!--  -->
    <OrderBody :tableData="tableData" @openasdf="openasdf"></OrderBody>
    <!-- 弹层 -->
    <Dialog ref="Dialog" :sontableData="sontableData"></Dialog>
  </div>
</template>

<script>
// 引入子组件
import orderbody from './policy/orderbody.vue'
import dialog from './policy/dialog.vue'
// 引入接口
import { getallorder } from '@/api/vm'
import moment from 'moment'

export default {
  name: 'Dkd3Index',
  components: {
    OrderBody: orderbody,
    Dialog: dialog
  },
  data () {
    return {
      isShow: false,
      status: '',
      params: {
        value1: null,
        pageIndex: 1,
        pageSize: 10,
        orderNo: null,
        startDate: null,
        endDate: null
      },
      // 表单数据
      tableData: [],
      // son
      sontableData: {}
    }
  },

  mounted () {
    this.getallorderApi()
  },

  methods: {
    async getallorderApi () {
      const res = await getallorder(this.params)
      // console.log(res)
      this.tableData = res.data.currentPageRecords
      // console.log(this.tableData)
    },
    async submit () {
      console.log(this.params.value1)
      const arr123123 = this.params.value1.map((item) => {
        return moment(item).format('YYYY-MM-DD')
      })
      this.params.value1 = arr123123
      this.params.endDate = this.params.value1[1]
      this.params.startDate = this.params.value1[0]
      // console.log(this.params.value1)
      console.log(this.params)
      this.params.endDate = null
      this.params.startDate = null
      const qweqeq = await this.$refs.qwerdadad.validate()
      console.log(qweqeq)
      // debugger
      // this.params.startDate = moment(this.params.startDate).format(
      //   'YYYY.MM.DD HH:mm:ss'
      // )
      // this.params.endDate = moment(this.params.endDate).format(
      //   'YYYY.MM.DD HH:mm:ss'
      // )
      // console.log(this.params)
      const res = await getallorder(this.params)
      console.log(res)
      this.tableData = res.data.currentPageRecords
    },
    //
    openasdf (row) {
      console.log(row)
      this.$refs.Dialog.isShow = true
      this.sontableData = { ...row }
      // console.log(this.$refs.Dialog.tableData)
    }
  }
}
</script>

<style lang="less" scoped>
.order-status {
  display: flex;
  align-items: center;
  height: 54px;
  margin-bottom: 30px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  .pic {
    margin-right: 76px;
    margin-bottom: 7px;
  }
  img {
    margin-left: 22px;
  }
  span {
    flex: 1;
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.85);
  }
}
.bigbox {
  // background-color: red;
  .inbox {
    display: flex;
    /deep/ .el-form-item {
      /deep/ .el-form-item__label {
        margin-left: 5px;
      }
      // background-color: pink;
      margin-top: 11px;
      margin-left: 5px;
      /deep/ .el-icon-search {
        font-size: 18px;
        line-height: 11px;
      }
      .input {
        margin-left: 0px;
      }
      .btn {
        margin-top: 3px;
        width: 80px;
        height: 36px;
        line-height: 10px;
      }
      //
    }
  }
  //
  .blocker {
    // background-color: red;
    .demonstration {
      // line-height: 63px;
    }
  }
}
</style>
